<template>
  <div class="dashboard-editor-container">
    <el-card class="box-card" v-loading="loading">
      <div slot="header" class="clearfix">
        <span>{{ $t("basicInformation") }}</span>
        <span style="margin-left: 10px;color:#f08d2c"
              v-if="applyInfo && applyInfo.isOverOrders">{{ $t('riskWarning') }}：{{ $t('theCurrentOverdue') }}</span>
        <span style="margin-left: 10px;color:#f08d2c"
              v-if="applyInfo && applyInfo.isBeforeRepayment">{{ $t('riskWarning') }}：{{
            $t('riskWarningValue')
          }}</span>
      </div>
      <el-row :gutter="40">
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="info">{{ $t("uesrName") }}：{{ userInfo.userName }}</div>
          <div class="info">{{ $t("age") }}：{{ userInfo.age }}</div>
          <div class="info">{{ $t("insurance") }}：
            <span v-for="dict in dict.type.insurance" v-if="userInfo.insuranceId == dict.value">
                {{ dict.label }}
              </span>
          </div>
          <div class="info">{{ $t("companyAddress") }}：{{ userInfo.companyAddr }}</div>
          <div class="info">{{ $t("expectedLoanAmount") }}：{{ userInfo.applyMoney }}</div>
          <div class="info">{{ $t("deviceType") }}：{{ userInfo.resource }}</div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="info">{{ $t("phoneNumber") }}：{{ userInfo.userPhone }}</div>
          <div class="info">{{ $t("iDNumber") }}：{{ userInfo.cardNo }}</div>
          <div class="info">{{ $t("corporateName") }}：{{ userInfo.companyId }}</div>
          <div class="info">zalo：{{ userInfo.zaloLink }}</div>
          <div class="info">{{ $t("education") }}：<span v-for="dict in dict.type.education_type"
                                                        v-if="dict.value == userInfo.education">{{
              dict.label
            }}</span></div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="info">{{ $t("birthday") }}：<span v-if="userInfo.birthday">{{ userInfo.birthday }} </span>
          </div>
          <div class="info">{{ $t("housingCategory") }}：<span v-for="dict in dict.type.house"
                                                              v-if="dict.value == userInfo.housing">{{
              dict.label
            }}</span>
          </div>
          <div class="info">{{ $t("companyPhone") }}：{{ userInfo.companyPhone }}</div>
          <div class="info">FaceBook：{{ userInfo.facebookLink }}</div>
          <div class="info">{{ $t("numberOfChildren") }}：<span v-for="dict in dict.type.children_num"
                                                               v-if="dict.value == userInfo.childNum">{{
              dict.label
            }}</span></div>
        </el-col>
      </el-row>
    </el-card>


    <el-card class="box-card" style="margin-top: 10px;">
      <div slot="header" class="clearfix">
        <span>{{ $t("bankCardInformation") }}</span>
        <el-button border style="float: right" type="primary" v-if="isAdmin"
                   @click="openUpdateUserBank(userBank.id,userBank.bankId,userBank.bankNo)">{{ $t("update") }}
        </el-button>
      </div>

      <el-col :xs="16" :sm="16" :lg="8" class="card-panel-col">
        <div class="info">{{ $t("bankCardHolder") }}：{{ userInfo.userName }}</div>
        <div class="info">{{ $t("bankAccount") }}：{{ userBank.bankNo }}</div>
      </el-col>
      <el-col :xs="16" :sm="16" :lg="8" class="card-panel-col">
        <div class="info">{{ $t("owningRow") }}：{{ userBank.name }}
        </div>
        <div class="info">{{ $t("branch") }}：{{ userBank.bankName }}</div>
      </el-col>
      <el-col :xs="16" :sm="16" :lg="8" class="card-panel-col">
        <div class="info">{{ $t("collectionCard") }}：</div>
        <div class="info">{{ $t("bankAccountType") }}：</div>
      </el-col>
    </el-card>

    <el-card class="box-card" style="margin-top: 10px;">
      <div slot="header" class="clearfix">
        <span>{{ $t("emergencyContact") }}</span>
      </div>

      <el-table
        :data="userRelationList"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          :label="$t('borrower')"
          width="180">
          <template slot-scope="scope">
            {{ userInfo.userName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="userName"
          :label="$t('contactName')"
          width="180">
        </el-table-column>
        <el-table-column
          prop="userPhone"
          :label="$t('phoneNumber')">
        </el-table-column>
        <el-table-column
          prop="relationId"
          :label="$t('relationship')">
          <template slot-scope="scope">
                <span v-for="dict in dict.type.relation"
                      v-if="scope.row.relationId == dict.value">{{ dict.label }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="box-card" style="margin-top: 10px;">
      <div slot="header" class="clearfix">
        <span class="cardTitle">{{ $t('identityCardInformation') }}</span>
      </div>

      <el-col :xs="16" :sm="16" :lg="8" class="card-panel-col">
        <div class="info">{{ $t('identityCardFront') }}：
          <!--<img :src="userInfo.cardFront" style="width: 200px;height: 100px;"/>-->
          <el-image
            v-if="previewListResource"
            style="width: 200px; height: 100px;"
            :src="userInfo.cardFront"
            :preview-src-list="[userInfo.cardFront]"/>
        </div>
      </el-col>
      <el-col :xs="16" :sm="16" :lg="8" class="card-panel-col">
        <div class="info">{{ $t('backOfIDCard') }}：
          <!--<img :src="userInfo.cardBack" style="width: 200px;height: 100px;"/>-->
          <el-image
            v-if="previewListResource"
            style="width: 200px; height: 100px;"
            :src="userInfo.cardBack"
            :preview-src-list="[userInfo.cardBack]"/>
        </div>
      </el-col>
      <el-col :xs="16" :sm="16" :lg="8" class="card-panel-col">
        <div class="info">{{ $t('handheldIDCard') }}：
          <!--<img :src="userInfo.holdImg" style="width: 200px;height: 100px;"/>-->
          <el-image
            v-if="previewListResource"
            style="width: 200px; height: 100px;"
            :src="userInfo.holdImg"
            :preview-src-list="[userInfo.holdImg]"/>
        </div>
      </el-col>
    </el-card>

    <el-dialog :title="$t('updateBank')" :visible.sync="open" width="600px">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item :label="$t('owningRow')" prop="bankId">
          <el-select v-model="form.bankId" clearable :placeholder="$t('pleaseSelect')">
            <el-option
              v-for="item in bankList"
              :key="item.id"
              :label="item.simpleName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('idNumber')" prop="bankNo">
          <el-input v-model="form.bankNo"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveUserBank">{{ $t('examineStatus.pass') }}</el-button>
        <el-button @click="open = false">{{ $t('cancel') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getUserBank, getUserInfo, getUserRelation, updateUserBank} from "@/api/app/user";
import {applyInfo} from "@/api/app/apply";
import {bankList} from "@/api/app/bank";

export default {
  dicts: ['education_type', 'children_num', 'house', 'insurance', 'job', 'marriage', 'relation', 'residence', 'salary', 'over_des'],
  data() {
    return {
      isAdmin: this.$store.state.user.id == 1,
      previewListResource: true,
      loading: false,
      open: false,
      userId:null,
      userInfo: {},
      userBank: {},
      form: {},
      userRelationList: null,
      bankList: null,
      applyInfo: null,
      rules: {
        bankId: [
          {required: true, message: "params is not null", trigger: "blur"},
        ],
        bankNo: [
          {required: true, message: "params is not null", trigger: "blur"},
        ]
      },
    };
  },
  created() {
    const applyId = this.$route.params.applyId;
    const userId = this.$route.params.userId;
    this.getInfo(userId,applyId);
  },
  methods: {
    getInfo(userId,applyId) {
      this.userId = userId;
      this.getUserInfo(userId);
      this.getUserBankInfo(userId);
      this.getUserRelation(userId);
      if (applyId){
        this.getApplyInfo(applyId,userId);
      }
      this.getListBank();
    },
    getUserInfo(userId) {
      this.loading = true;
      getUserInfo({userId: userId}).then(response => {
          this.userInfo = response.data;
          this.getUserAge();
          this.loading = false;
        }
      );
    },
    //银行卡详情
    getUserBankInfo(userId) {
      getUserBank({userId: userId}).then(response => {
          this.userBank = response.data ? response.data : {};
        }
      );
    },
    /**
     * 紧急联系人
     */
    getUserRelation(userId) {
      getUserRelation({userId: userId}).then(response => {
          this.userRelationList = response.data;

        }
      );
    },
    //获取银行卡列表
    getListBank() {
      bankList().then(response => {
          this.bankList = response.data;
        }
      );
    },
    openUpdateUserBank(id, bankId, bankNo) {
      this.reset();
      this.form.id = id;
      this.form.bankId = bankId;
      this.form.bankNo = bankNo;
      this.open = true;
    },
    //获取订单详情
    getApplyInfo(id, userId) {
      applyInfo({id: id, userId: userId}).then(response => {
          this.applyInfo = response.data;
        }
      );
    },
    saveUserBank() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateUserBank(this.form).then(response => {
            this.$modal.msgSuccess("success");
            this.open = false;
            // this.getUserBank(this.$route.params.userId);
            this.getUserBankInfo(this.userId);
          })
        }
      })
    },
    reset(){
      this.form = {
        id: undefined,
        userId: this.$route.params.userId,
        bankId: undefined,
        bankNo: undefined,
      }
    },
    getUserAge(date) {
      let now = new Date();
      let startDate = new Date(this.userInfo.birthday);
      let newDate = now.getTime() - startDate.getTime();
      // 向下取整  例如 10岁 20天 会计算成 10岁
      // 如果要向上取整 计算成11岁，把floor替换成 ceil
      let age = Math.ceil(newDate / 1000 / 60 / 60 / 24 / 365);
      if (isNaN(age)) {
        age = 0;
      }
      this.userInfo.age = age;
    },
  }
};
</script>

<style lang="scss" scoped>
.cardTitle {
  font-size: 16px;
  font-weight: 600;
}

.info {
  line-height: 36px;
}
</style>
